<template>
	<view class="cash-pay">
		<view class="popup-title">
			现金-人民币
		</view>
		<view class="cash-pay-input">
			<text class="margin-lr text-green">￥</text> {{inputText||''}}
		</view>
		<view class="cash-pay-sum">
			<text>应收</text> <text class="text-red">{{noPayAmount||'-'}}</text>
			<text>找零</text> <text class="text-red">{{over||'-'}}</text>
		</view>
		<view class="cash-pay-keyboard">
			<cash-pay-keyboard @change="changeNumber" @backspace="backspace" @clear="clear" @confirm="confirm">
			</cash-pay-keyboard>
		</view>
	</view>
</template>

<script>
	/**
	 * 
	 * @description
	 * @tutorial
	 * @event {Function} confirm	点击确认键
	 * @example
	 */
	export default {
		name: "cash-pay-popup",
		data() {
			return {
				inputText: "",
				customChar: [1, 2, 3, '退格', 4, 5, 6, '清空', 7, 8, 9, '.', 0, '00']
			};
		},
		props: {
			noPayAmount: {
				type: [Number, String]
			},
			billData: {
				type: Object
			},
		},
		computed: {
			over() {
				const need = Number(this.noPayAmount)
				const input = Number(this.inputText)
				if (input && input > need) {
					return Number(input - need).toFixed(2)
				}
			}
		},
		methods: {
			confirm() {
				const number = Number(this.inputText)
				if (number) {
					this.$emit('confirm', {
						// inMoney: this.billData._finalSumPrice,
						inMoney: number>this.billData._finalSumPrice?this.billData._finalSumPrice:number,
						needMoney: this.billData._finalSumPrice,
						overMoney: Number(this.over),
						type: "现金"
					})
				}else{
					uni.showToast({
						title:'请输入大于0的金额',
						icon:'none'
					})
				}

			},
			clear() {
				this.inputText = ''
			},
			changeNumber(num) {
				let result = `${this.inputText}${num}`
				if (result) {

				}
				this.inputText = result
			},
			backspace() {
				if (this.inputText) {
					this.inputText = this.inputText.slice(0, this.inputText.length - 1)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cash-pay {
		width: 55rem;
		// height: 70rem;
		padding: 3rem;

		&-input {
			letter-spacing: 2px;
			width: 100%;
			height: 7.5rem;
			line-height: 7.5rem;
			border: 1px solid $retail-color-primary;
			border-radius: 1rem;
			margin: 1rem 0;
			font-size: 2.8rem;
		}

		&-sum {
			padding: 1rem 2rem 2rem 2rem;
			font-size: $retail-font-size-sm;

			.text-red {
				color: #FF5733;
				margin: 0 2rem;
			}
		}
	}
</style>
